<template>
  <div class="tabs">
    <div
      v-for="tab in tabs"
      :key="tab.id"
      class="tab_item"
      :class="{ active: tab.id === activeTabId }"
      @click="changeTab(tab)"
    >
      <div>{{ tab.label }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps(["activeTabId"]);
const lang: any = getCurrentPageLang("setting");

const emits = defineEmits(["changeTab"]);

const tabs: any[] = [
  { id: 1, label: lang.tab_account },
  { id: 2, label: lang.tab_transactions },
  { id: 3, label: lang.tab_settings },
];

const changeTab = (tab: any) => {
  emits("changeTab", tab);
};
</script>

<style scoped lang="scss">
.tabs {
  width: 100%;
  height: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #40294f;
  box-sizing: border-box;
  border-radius: 0.15rem;
  color: #8b6e8b;
  transition: transform 0.2s linear;
  overflow: hidden;
}
.tab_item {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
}
.tab_item > div {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-weight: 100;
  font-size: 0.36rem;
  text-align: center;
  padding: 0 0.1rem;
}
.tab_item:first-child {
  border-top-left-radius: 0.15rem;
  border-bottom-left-radius: 0.15rem;
}
.active {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(180deg, #ff3d9e, #fd66b1);
}
</style>
